function laohuji(sel) {
	this.domsu = document.querySelector(sel);
	
	var boxRect = this.domsu.querySelector(".laohuji").getBoundingClientRect();
	console.log(boxRect);
	
	this.h = Math.ceil(boxRect.height); 
	this.w = Math.ceil(boxRect.width / 3);
	console.log(this.w + "=" + this.h);
	this.sz1 = document.querySelectorAll(sel + " .laohuji div")[0];
	this.sz2 = document.querySelectorAll(sel + " .laohuji div")[1];
	this.sz3 = document.querySelectorAll(sel + " .laohuji div")[2];
	this.bgsize = "background-size: 100% " + this.h * 10 + "px;";
	
	this.init();
}
laohuji.prototype.init = function() {
	this.seti = null;
	this.end = false;
	this.sysend = false;
	
	this.r1 = 0;
	this.t1 = 0;
	this.b1 = 0;
	this.c1 = this.h * 1.3 * 10;
	this.d1 = 100;
	
	this.r2 = 0;
	this.t2 = 0;
	this.b2 = 0;
	this.c2 = this.h * 1 * 10;
	this.d2 = 100;
	
	this.r3 = 0;
	this.t3 = 0;
	this.b3 = 0;
	this.c3 = this.h * 1 * 10;
	this.d3 = 100;
}

laohuji.prototype.Linear = function(t, b, c, d){
	return c * t / d + b;
}
laohuji.prototype.quadEaseIn = function(t, b, c, d){
	return c * (t /= d) * t + b;
}
laohuji.prototype.quadEaseOut = function(t, b, c, d){
	return -c * (t /= d) * (t - 2) + b;
}
laohuji.prototype.quadEaseInOut = function(t, b, c, d) {
	if((t /= d / 2) < 1) return c / 2 * t * t + b;
	return -c / 2 * ((--t) * (t - 2) - 1) + b;
}


laohuji.prototype.start = function() {
	var self = this;
	var w = this.h;
	this.sz1.setAttribute("style", "background-position-y:0;")
	this.sz2.setAttribute("style", "background-position-y:0;")
	this.sz3.setAttribute("style", "background-position-y:0;")

	var r1v1 = 0,r1v2 = 0;
	var r2v1 = 0,r2v2 = 0;
	var r3v1 = 0,r3v2 = 0;
	
	this.seti = setInterval(function() {
		
		if (self.end && self.sysend) {
			self.r1 = self.quadEaseOut(self.t1 , self.b1 , self.c1, self.d1);
			self.r2 = self.quadEaseOut(self.t2 , self.b2 , self.c2, self.d2);
			self.r3 = self.quadEaseOut(self.t3 , self.b3 , self.c3, self.d3);
			
			if (self.t1 < self.d1) {
				self.t1++;
			}
			if (self.t2 < self.d2) {
				self.t2++;
			}
			if (self.t3 < self.d3) {
				self.t3++;
			}
			
			if (self.t1 >= self.d1 && self.t2 >= self.d2 && self.t3 >= self.d3) {
				clearInterval(self.seti);
			}
		} else {
			self.t1++;
			if (self.t1 > 20) {
				self.t2++;
			}
			if (self.t1 > 40) {
				self.t3++;
			}
			if(self.t1 <= self.d1) {
				if (self.t1 == self.d1-1) {
					r1v1 = self.r1;
				}
				if (self.t1 == self.d1) {
					r1v2 = self.r1;
				}
				self.r1 = self.quadEaseIn(self.t1 , self.b1 , self.c1, self.d1);
			} else {
				self.r1 += (r1v2 - r1v1);
			}
			
			if(self.t2 <= self.d2) {
				if (self.t2 == self.d2-1) {
					r2v1 = self.r2;
				}
				if (self.t2 == self.d2) {
					r2v2 = self.r2;
				}
				self.r2 = self.quadEaseIn(self.t2 , self.b2 , self.c2, self.d2);
			} else {
				self.r2 += (r2v2 - r2v1);
			}
			
			if(self.t3 <= self.d3) {
				if (self.t3 == self.d3-1) {
					r3v1 = self.r3;
				}
				if (self.t3 == self.d3) {
					r3v2 = self.r3;
				}
				self.r3 = self.quadEaseIn(self.t3 , self.b3 , self.c3, self.d3);
			} else {
				self.r3 += (r3v2 - r3v1);
				self.sysend = true;
			}
		}
		
		self.sz1.setAttribute("style", self.bgsize + "background-position-y:" + self.r1 + "px;")
		self.sz2.setAttribute("style", self.bgsize + "background-position-y:" + self.r2 + "px;")
		self.sz3.setAttribute("style", self.bgsize + "background-position-y:" + self.r3 + "px;")
		
	}, 1000 / 60);
}

laohuji.prototype.funend = function(gw, sw, bw){
	var self = this;
	if (this.sysend) {
		var r1 = this.r1;
		var r2 = this.r2;
		var r3 = this.r3;
		
		var h = this.h;
		
		var quan1 = Math.ceil(r1 / h / 10);
		var quan2 = Math.ceil(r2 / h / 10);
		var quan3 = Math.ceil(r3 / h / 10);
		
		this.t1 = 0
		this.b1 = this.r1;
		this.c1 = (quan1+1) * h * 10 - (this.r1) + ((gw + 1) * h);
		this.d1 = 100;
		
		this.t2 = 0
		this.b2 = this.r2;
		this.c2 = (quan2+1) * h * 10 - (this.r2) + ((sw + 1) * h);
		this.d2 = 150;
		
		this.t3 = 0
		this.b3 = this.r3;
		this.c3 = (quan3+1) * h * 10 - (this.r3) + ((bw + 1) * h);
		this.d3 = 200;
		
		this.end = true;
	} else {
		setTimeout(function(){
			self.funend(gw, sw, bw);
		},1000);
	}
}


